<!-- src/components/Danmu.vue -->
<template>
    <div class="danmu" :style="customStyle" >
      <a-flex align="center">
        <a-avatar :src="user?.userAvatar" :size="36" style="margin-right: 4px">
          <template #icon v-if="!user?.userAvatar">
            <UserOutlined />
          </template>
        </a-avatar>
        {{ content }}
      </a-flex>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import {
  UserOutlined,
} from '@ant-design/icons-vue'

interface prop {
  content: string,
  customStyle: object
  user: API.UserVO | null  // 修正类型定义，支持null
}

const props = defineProps<prop>()  // 严格类型校验
</script>

<style scoped>
.danmu {
  position: absolute;
  padding: 8px 16px; /* 增大内边距，让弹幕更饱满 */
  border-radius: 10px; /* 圆角更圆润 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 增强阴影，更立体 */
  color: #fff; /* 文字改为白色，与深色背景对比更清晰 */
  font-size: 32px !important; /* 放大字体（原16px → 20px） */
  max-width: 400px;
  white-space: normal;
  word-wrap: break-word;
  opacity: 1; /* 取消整体透明，背景透明由 `background-color` 控制 */
  transition: transform 10s linear, opacity 0.3s;
  z-index: 2;
}


</style>
